/// CRUD * 弹框-详情

<template>
  <ExModal :loading :width="680" footer>
    <!-- 详情 -->
    <ExDescriptions>
      <!-- <div> -->
      <!-- 详情项-站点名称 -->
      <ExDescriptionsItem label="站点名称">
        <!-- 注释：站点名称 -->
        {{ detail?.siteName }}
      </ExDescriptionsItem>
      <!-- </div> -->
      <!-- 详情项-所属系统 -->
      <ExDescriptionsItem label="所属系统">
        {{ findOption(OPTIONS_SYSTEM, detail?.systemId)?.label }}
      </ExDescriptionsItem>
      <!-- 详情项-所属分组 -->
      <ExDescriptionsItem label="所属分组">
        {{ findOption(OPTIONS_GROUP, detail?.groupId as any)?.label }}
      </ExDescriptionsItem>
      <ExDescriptionsItem />
      <!-- 详情项-备注 -->
      <ExDescriptionsItem label="备注" :span="2">
        {{ detail?.remarks }}
      </ExDescriptionsItem>
    </ExDescriptions>
  </ExModal>
</template>

<script setup lang="ts">
import type { Loading, ModalProps } from '@expresso/plus'
import { findOption } from '@expresso/plus'
import { OPTIONS_GROUP, OPTIONS_SYSTEM } from '../../helpers'
import { type SiteDetail, apiQuerySite } from '@/apis/system/project/Site'

//# 类型

type DetailType = SiteDetail

export type DetailModalProps = ModalProps<{
  id?: number
}>

//# 属性

const $props = defineProps<DetailModalProps>()

//# 成员

/** 加载器 */
const loading = inject<Loading>(ExDialogContextKeys.loading)!

/** 详情 */
const detail = ref<DetailType>()

//# 周期
onMounted(() => {
  loading(async () => {
    detail.value = await apiQuerySite($props.params!.id!)
  })
})
</script>

<style scoped></style>
